<template>
  <div>
    <!-- 身份信息维护 -->
    <div class="content">
      <br />
      <el-form
        ref="ruleFormRef"
        :model="address"
        :rules="rules"
        class="demo-ruleForm"
        :size="formSize"
        status-icon
      >
        <div class="ml50">
          <el-form-item label="公司名称" prop="name">
            <el-input v-model="address.name" class="inp62" />
          </el-form-item>

          <div class="df">
            <el-form-item label="所在城市" prop="province">
              <el-select
                v-model="address.province"
                placeholder="请选择省"
                :style="{
                  width: `${prop.width}px`,
                  marginRight: `${prop.gap}px`,
                }"
                style="margin-left: 10px"
                @change="handleProvinceSelect"
              >
                <el-option
                  v-for="item in regionData"
                  :label="item.label"
                  :value="item.value"
                />
              </el-select>
            </el-form-item>

            <el-form-item prop="city">
              <el-select
                v-model="address.city"
                placeholder="请选择市"
                :disabled="!address.province || cityList.length == 0"
                :style="{
                  width: `${prop.width}px`,
                  marginRight: `${prop.gap}px`,
                }"
                @change="handleCitySelect"
              >
                <el-option
                  v-for="item in cityList"
                  :label="item.label"
                  :value="item.value"
                />
              </el-select>
            </el-form-item>

            <el-form-item prop="area">
              <el-select
                v-model="address.area"
                placeholder="请选择区"
                :style="{ width: `${prop.width}px` }"
                :disabled="
                  !address.province || !address.city || areaList.length == 0
                "
                @change="handleAreaSelect"
              >
                <el-option
                  v-for="item in areaList"
                  :label="item.label"
                  :value="item.value"
                />
              </el-select>
            </el-form-item>
          </div>

          <el-form-item label="详细地址">
            <el-input v-model="address.name" class="inp62 ml10" />
          </el-form-item>

          <el-form-item label="公司类型" prop="type">
            <el-checkbox-group v-model="address.type" v-for="item in 7">
              <el-checkbox label="投标企业" name="type" />
            </el-checkbox-group>
          </el-form-item>

          <el-form-item label="业务类型" prop="business">
            <el-checkbox-group v-model="address.business" v-for="item in 12">
              <el-checkbox label="建筑工程" name="type" />
            </el-checkbox-group>
          </el-form-item>

          <el-form-item label="公司职位" prop="region1">
            <el-select v-model="address.region1" placeholder="请选择职位">
              <el-option label="1" value="shanghai" />
            </el-select>
          </el-form-item>
        </div>
        <div class="footer">
          <el-button @click="resetForm(ruleFormRef)" class="btn">
            取消
          </el-button>
          <el-button
            type="primary"
            class="btnc"
            @click="submitForm(ruleFormRef)"
          >
            保存
          </el-button>
        </div>
      </el-form>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { ref, reactive, computed, ComputedRef } from "vue";
// element-plus
import type { FormInstance, FormRules } from "element-plus";
//css
import "../../assets/com/com.scss";
//地区选择
import { regionData, codeToText } from "element-china-area-data";

// 表单数据
let address = reactive<{
  province: string;
  city: string;
  area: string;
  name: string;
  region: string;
  type: string[];
  region1: string;
  business: string[];
}>({
  province: "",
  city: "",
  area: "",
  name: "",
  type: [],
  region: "",
  region1: "",
  business: [],
});

interface RuleForm {}

const formSize = ref("default");

const ruleFormRef = ref<FormInstance>();
// 正则
const rules = reactive<FormRules<RuleForm>>({
  name: [{ required: true, message: "请输入公司名称", trigger: "blur" }],
  region: [{ required: true, message: "请输入公司名称", trigger: "blur" }],
  region1: [{ required: true, message: "请选择公司职位", trigger: "blur" }],
  business: [{ required: true, message: "请选择业务类型", trigger: "blur" }],
  type: [{ required: true, message: "请选择公司类型", trigger: "blur" }],
});

// 确定按钮
const submitForm = async (formEl: FormInstance | undefined) => {
  if (!formEl) return;
  await formEl.validate((valid, fields) => {
    if (valid) {
      console.log("submit!");
    } else {
      console.log("error submit!", fields);
    }
  });
};

// 取消按钮
const resetForm = (formEl: FormInstance | undefined) => {
  if (!formEl) return;
  formEl.resetFields();
};

const prop = withDefaults(
  defineProps<{
    gap: string | number; //选择框中间间隙
    width: string | number; //选择框宽度
  }>(),
  {
    gap: "10",
    width: "200",
  }
);
//选择地区
const emit = defineEmits<{
  (
    e: "getAddress",
    data: {
      code: string[]; //区域码
      name: string[]; //汉字
      isComplete: boolean; //是否选择完整，方便校验
    }
  ): void;
}>();

interface AreaList {
  value: string;
  label: string;
  children?: AreaList[];
}
//切换省份函数
const handleProvinceSelect = () => {
  address.city = "";
  address.area = "";
  emit("getAddress", {
    code: [address.province], //区域码
    name: [codeToText[address.province]], //汉字
    isComplete: false,
  });
};
//切换城市函数
const handleCitySelect = () => {
  address.area = "";
  emit("getAddress", {
    code: [address.province, address.city], //区域码
    name: [codeToText[address.province], codeToText[address.city]], //汉字
    isComplete: areaList.value.length == 0 ? true : false,
  });
};
//切换地区函数
const handleAreaSelect = () => {
  emit("getAddress", {
    code: [address.province, address.city, address.area], //区域码
    name: [
      codeToText[address.province],
      codeToText[address.city],
      codeToText[address.area],
    ], //汉字
    isComplete: true,
  });
};
//二级城市列表
const cityList: ComputedRef<AreaList[]> = computed((): AreaList[] => {
  if (!address.province) {
    return [];
  }
  let temp = regionData.find((item: any) => {
    return item.value == address.province;
  });
  return temp!.children ? temp!.children : [];
});
//三级地区列表
const areaList: ComputedRef<AreaList[]> = computed((): AreaList[] => {
  if (!address.province || !address.city) {
    return [];
  }
  if (cityList.value.length == 0) {
    return [];
  } else {
    let temp = cityList.value.find((item: any) => {
      return item.value == address.city;
    });
    if (temp) {
      return temp.children ? temp.children : [];
    } else {
      return [];
    }
  }
});
</script>
<style>
/* .el-input__wrapper {
  border: 1px solid #dddddd !important;
} */
/* 下拉框 */
.el-select__wrapper {
  width: 200px;
  height: 40px;
}
/* 下拉框 */
.el-select {
  width: 200px !important;
}
</style>
<style lang="scss" scoped>
.content {
  position: relative;
  // width: 1610px;
  height: calc(100vh - 150px);
  background: #ffffff;
  opacity: 1;
  border-radius: 0px;
  .demo-ruleForm {
    margin: 50px 0 0 0;
  }
  .one {
    width: 84px;
    height: 14px;
    font-size: 14px;
    font-weight: 400;
    color: #ff4848;
  }
  .footer {
    // margin-top: 472px;
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 80px;
    background: #ffffff;
    box-shadow: 0px -2px 8px rgba(0, 0, 0, 0.04);
    display: flex;
    align-items: center;
    justify-content: center;
  }
}
</style>
